<template>
	<tm-app ref='staff' class="relative">
		<navbar-module title="新增员工"></navbar-module>

		<view v-if="!flag" style="background-image: linear-gradient(180deg,#FADC19 2%, transparent 50%);">
			<tm-form ref="form" v-model="staffForm" layout="vertical">
				<tm-form-item label="姓名" field="name">
					<tm-input v-model="staffForm.name" />
				</tm-form-item>
				<tm-form-item label="电话" field="phone">
					<tm-input v-model="staffForm.phone" />
				</tm-form-item>
				<tm-form-item label="添加头像" field="avatar">
					<tm-upload showSort v-model="list" ref="up" :width="636" :rows="4" :maxFile="1"
						url="https://wap.wkxz.net//api/wap/work/staff/form-data-image" @success="uploadSuccess"
						:chooesefileAfter="complateFileUpload" />

				</tm-form-item>
				<tm-form-item>
					<tm-button :margin="[20]" block :linear-color="['#FADC19', '#23C343']" :round="16" linear="right"
						:shadow="0" label="提交" @click="confirm" />
				</tm-form-item>
			</tm-form>
		</view>


		<tm-cropimg v-if="flag" :url="url"></tm-cropimg>


		<view class="absolute fulled flex" style="bottom:30rpx;justify-content: center;">
				<tm-checkbox :round="10" color="#23C343" value="banner" :size="32" v-model="agreemFlag">
					<template v-slot:default="{checked}">
						<view class="flex flex-row">
							<tm-text label="我已经阅读并同意"></tm-text>
							<view>
								<tm-text color="primary" label="《用户服务协议》"
									@click="goto('/pages/protocol/service/service')"></tm-text>
							</view>
							<tm-text label="和"></tm-text>
							<view>
								<tm-text color="primary" label="《隐私政策》"
									@click="goto('/pages/protocol/privacy/privacy')"></tm-text>
							</view>
						</view>
					</template>
				</tm-checkbox>
		</view>


		<tm-message ref="msg" :lines="2"></tm-message>
		<tm-notification placement="top" ref="notif" :offset="[32,90]" />
	</tm-app>
</template>

<script setup lang='ts'>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		nextTick
	} from 'vue'
	import {
		setAccount
	} from '../../index/resource/http'
	import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
	import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'


	const msg = ref < InstanceType < typeof tmMessage > | null > (null)
	const notif = ref < InstanceType < typeof tmNotification > | null > (null)


	const flag = ref(false)
	const list = ref([])
	const url = ref(null)


	const staffForm = ref({
		name: null,
		phone: null,
		avatar: null,
	})

	const agreemFlag = ref(null)

	onLoad(option => {
		if (option.formData) {
			staffForm.value = JSON.parse(option.formData)
			staffForm.value.phone = '18782637627'
		}

	})


	const confirm = async () => {
		debugger
		const res = await setAccount(staffForm.value)
		if (res.code == 0) {
			msg.value.show({
				model: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1300)
		} else {
			nextTick(() => {
				notif.value?.show({
					label: res.message,
					color: '#FF837F'
				})
			})
		}
	}

	// 纯小程序方法
	const complateFile = () => {
		wx.chooseMedia({
			count: 9,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			camera: 'back',
			success(res) {
				wx.cropImage({
					src: res.tempFiles[0].tempFilePath, // 图片路径
					cropScale: '16:9', // 裁剪比例
					success(res2) {
						wx.compressImage({
							src: res2.tempFilePath,
							quality: 80,
							success: function(compressedRes) {
								// wx.showLoading()
								wx.uploadFile({
									url: 'https://wap.wkxz.net/api/wap/work/staff/form-data-image',
									filePath: compressedRes.tempFilePath,
									name: 'file',
									success: function(res) {
										// wx.hideLoading()

									}
								})
							}
						})
					}
				})
			}
		})
	}


	const complateFileUpload = async (imgData: any) => {
		let aa = await testaa(imgData)
		let bb = await testbb(aa, imgData)
		return bb

	}

	const testaa = (imgData) => {
		return new Promise((resolve, reject) => {
			wx.cropImage({
				// 裁剪图片
				src: imgData[0].url,
				cropScale: '1:1',
				success: (res) => {
					resolve(res)
				}
			})
		});
	}

	const testbb = (res, imgData) => {
		return new Promise((resolve, reject) => {
			wx.compressImage({
				src: res.tempFilePath,
				quality: 80,
				success: (compressedRes) => {
					imgData[0].url = compressedRes.tempFilePath
					// console.log('图片才裁剪压缩');
					resolve(imgData)
				}
			})
		});

	}


	const uploadSuccess = (val) => {
		staffForm.value.avatar = JSON.parse(val.response).data.url
	}


	const goto = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style>

</style>